<script setup lang="ts">
import { router } from "@mars/router"
import { useUserStore } from "@mars/store/modules/user"
import { ElMessage } from "element-plus"

const handleLogout = () => {
  ElMessage.success("已退出登录")
  const userStore = useUserStore()
  userStore.removeToken()
  router.push("/login")
}
const testButton = () => {
}
</script>

<template>
  <div class="top-bar">
    <div class="logo-container">
<!--      <img id="logo-img" src="/img/logo.png" alt="" />-->
      <h1>实景三维平台</h1>
    </div>
    <div class="spacer" style="flex: 1"></div>
    <!-- 用于占位，可以放置其他内容 -->
<!--    <button class="exit-account" @click="testButton">test</button>-->
    <router-link to="/upload"  ><button class="exit-account">上传</button></router-link>
    <button class="exit-account" @click="handleLogout">退出登录</button>
  </div>
</template>

<style scoped lang="less">
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f2f2f2;
}

.logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 20%;

  #logo-img {
    width: 40px;
    height: 40px;
  }
}

.exit-account {
  padding: 8px 16px;
  margin: 0 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.exit-account:hover {
  background-color: #0056b3;
}
</style>
